<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>身份识别</title>
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="/css/mdb.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/toastr.css" rel="stylesheet">

    <style>

        html,
        body,
        header,
        .view {
            height: 100%;
        }

        @media (max-width: 740px) {
            html,
            body,
            header,
            .view {
                height: 815px;
            }
        }

        @media (min-width: 800px) and (max-width: 850px) {
            html,
            body,
            header,
            .view {
                height: 600px;
            }
        }

        .intro-2 {
            background: url("https://upload-images.jianshu.io/upload_images/3424642-861516aae6d51840.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240")no-repeat center center;
            background-size: cover;
        }
    </style>
</head>

<body class="creative-lp">

<header>

    <!--Intro Section-->
    <section class="view intro-2">
        <div class="mask rgba-gradient-1">
            <div class="container h-100 d-flex justify-content-center align-items-center">
                <div class="row">
                    <div class="col-md-12 wow fadeIn mb-3">
                        <div class="card card-body rgba-white-slight text-center white-text">

                            <ul class="list-unstyled py-5 mx-lg-5">

                                <li class="avatar mx-auto">
                                    <img src="https://upload-images.jianshu.io/upload_images/3424642-03b4bcd0e4977a5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class=" avatar rounded-circle">
                                </li>

                                <li>
                                    <div class="md-form mb-0">
                                        <input type="password" id="secret" class="form-control white-text">
                                        <label for="secret" class="white-text">请输入暗号</label>
                                    </div>

                                    <div class="px-5">
                                        <button onclick="skip()" class="btn pink-gradient btn-rounded font-weight-bold wow fadeInLeft waves-effect waves-light" data-wow-delay="0.4s" style="visibility: visible; animation-name: fadeInLeft; animation-delay: 0.4s;">确定暗号</button>
                                        <a href="/" class="btn btn-white btn-rounded orange-text font-weight-bold ml-lg-0 wow fadeInLeft waves-effect waves-light" data-wow-delay="0.4s" style="visibility: visible; animation-name: fadeInLeft; animation-delay: 0.4s;">返回首页</a>
                                    </div>

                                    <p class="white-text description pt-5 wow fadeIn" data-wow-delay="0.4s">

                                    </p>

                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</header>

<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
    //Animation init
    new WOW().init();

    /**
     * 跳转
     */
    function skip() {
        var secret = $("#secret").val();
        window.location.href = "/about?secret=" + secret;
    }

</script>

</body>
</html>